<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>爱笙活技术部</title>
  <meta name="description" content="爱笙活技术部" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- for ios 7 style, multi-resolution icon of 152x152 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
  <link rel="apple-touch-icon" href="./logo.png">
  <meta name="apple-mobile-web-app-title" content="Flatkit">
  <!-- for Chrome on Android, multi-resolution icon of 196x196 -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="shortcut icon" sizes="196x196" href="http://www.52iuh.com/images/logo.ico">

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.1/axios.min.js"></script>
  <style type="text/css">
    .tgn-c {
      text-align: center;
    }

    .test-link {
      display: block;
      flex: 1;
      /*border-bottom: 1px solid currentColor;*/
    }

    .main {
      width: 600px;
      max-width: 92vw;
      margin: 0 auto;
    }

    .items {
      border: 1px solid #d9d9d9;
      padding: 0;
    }

    .item {
      background: #f5f5f5;
      padding: 0 10px;
      line-height: 3.1;
      display: flex;
    }

    .item:nth-of-type(even) {
      background: #fff;
    }

    .main .item:hover {
      background: #def0d8;
    }

    a:hover {
      cursor: pointer;
    }

    .flex {
      display: flex;
    }

    .flex-1 {
      flex: 1;
    }

    .item-right {
      width: 200px;
      margin: 1em;
    }


    .paper {
      margin: 0;
    }

    .paper dl,
    dd {
      margin: 0;
    }

    .paper .content {
      min-height: 50px;
      padding-left: 1.8em;
      padding-right: .8em;
      font-size: 13px;
    }

    .a2 .title {
      background: url(http://7moa.com/wish/Images/a2_1.gif) no-repeat 0;
      background-size: 100%;
      height: 43px;
    }

    .h5 .a2 .title {
      background: url(http://7moa.com/wish/Images/a2_1.gif) no-repeat 0 0;
      background-size: 100%;
      height: 43px;
    }

    .a2 .content {
      background: url(http://7moa.com/wish/Images/a2_2.gif) repeat-y -2px;
      background-size: 101%;
    }

    .h5 .a2 .content {
      background: url(http://7moa.com/wish/Images/a2_2.gif) repeat-y 0;
      background-size: 100%;
    }

    .a2 .bottom {
      background: url(http://7moa.com/wish/Images/a2_3.gif) no-repeat 0px;
      background-size: auto 100%;
      background-size: 100% auto;
      height: 60px;
    }

    .h5 .a2 .bottom {
      background: url(http://7moa.com/wish/Images/a2_3.gif) no-repeat 0;
      background-size: auto 100%;
      background-size: 100% auto;
      height: 60px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="main">
      <h1 class="tgn-c">要优惠技术部 - 书签</h1>
      <div class="flex">
        <ul class="items flex-1">
          <li class="item" v-for="(el,i) in markDev" :key="'homeL4' + i"><a class="test-link"
              @click="openUrl(el.url)">{{i+1}}.{{el.name}}</a></li>
        </ul>
        <div class="item-right">
          <dl class="paper a2" style="left: 454px; top: 204px; z-index: 101;">
            <dt class="title">

            </dt>
            <dd class="content">
              <div class="text-title">
                {{encourage}}
              </div>
            </dd>
            <dd class="bottom"><span class="time"></span></dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
  <script>
    // "use strict";
    (function () {
      (function () {
        var privateAge = 10;

        function privateFn() {
          console.log('私有方法');
        }
        MyObj = function () {};
        // 特权方法
        MyObj.prototype.publicMethod = function () {
          privateAge++;
          return privateFn();
        }
        // 特权方法
        MyObj.prototype.getAge = function () {
          console.log(privateAge);
          return privateAge;
        }
      })();
      var test = new MyObj();
      console.log(test);
      test.publicMethod();
      console.log(test.getAge());
    })();
  </script>
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        api: 'http://api.iuuzu.com:9007',
        encourage: '正在加载...',
        markDev: [{
            url: "http://w.iuuzu.com",
            name: "wiki"
          },
          {
            url: "http://z.iuuzu.com:8080/zentao/my/",
            name: "禅道"
          },
          {
            url: "http://g.iuuzu.com",
            name: "git"
          },
          {
            url: "http://yapi.iuuzu.com",
            name: "yapi"
          },
          {
            url: "http://j.iuuzu.com/",
            name: "Jenkins"
          },
          {
            url: 'http://47.103.219.35:8080/cat/r/t',
            url2: "https://cat.52iuh.com/cat/r",
            name: "Cat监控"
          },
          {
            url: "http://192.168.31.204:8070/signin",
            name: "Apollo"
          },
          {
            url: "http://mail.52iuh.com",
            name: "邮件"
          },
          {
            url: "http://excel.iuuzu.com/iuh",
            name: "在线表格"
          },
          // {url: "https://www.dogedoge.com/", name: "搜索"},
        ]
      },
      methods: {
        openUrl(url) {
          // a标签的target属性值
          // _blank _self _parent _top
          // 打开页面
          window.open(url, "_blank");
          // location.href = url;
          // location.replace(url);
          // location.assign(url);
        }
      },
      mounted() {
        // axios.defaults.withCredentials = true; // 若跨域请求需要带 cookie 身份识别
        // axios.defaults.headers.get['Access-Control-Allow-Origin'] = 'include';
        // 响应类型
        axios.get(this.api + '/proxy/get').then(res => {
          if (res.data.code === 'success') {
            this.encourage = res.data.data;
          }
        })
      }
    })
  </script>
</body>

</html>